<template>
  <t-form :model="globalSetting" layout="vertical" class="setting-global">
    <t-divider id="new">新建索引</t-divider>
    <t-form-item id="defaultShard" label-align="top" label="默认分片数">
      <t-input-number
        v-model="globalSetting.defaultShard"
        controls-position="right"
      ></t-input-number>
    </t-form-item>
    <t-form-item id="defaultReplica" label-align="top" label="默认副本数">
      <t-input-number
        v-model="globalSetting.defaultReplica"
        controls-position="right"
      ></t-input-number>
    </t-form-item>

    <t-divider id="global-search">
      全局索引查询条件（修改后请
      <span class="like-red">刷新</span>
      索引）
    </t-divider>
    <t-form-item id="homeSearchState" label-align="top" label="状态" help="过滤索引的状态">
      <t-radio-group v-model="globalSetting.homeSearchState">
        <t-radio :value="0">不设置</t-radio>
        <t-radio :value="1">打开</t-radio>
        <t-radio :value="2">关闭</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item id="homeExcludeIndices" label-align="top" class="w-full" help="回车新增">
      <template #label>
        <span>排除指定索引</span>
        <t-tooltip content="支持正则表达式" placement="top" effect="light">
          <questionnaire-icon class="ml-5px" />
        </t-tooltip>
      </template>
      <t-tag-input v-model="globalSetting.homeExcludeIndices" allow-clear />
    </t-form-item>
    <t-form-item id="homeIncludeIndices" label-align="top" class="w-full" help="回车新增">
      <template #label>
        <span>显示指定索引</span>
        <t-tooltip content="支持正则表达式" placement="top" effect="light">
          <questionnaire-icon class="ml-5px" />
        </t-tooltip>
      </template>
      <t-tag-input v-model="globalSetting.homeIncludeIndices" allow-clear style="" />
    </t-form-item>

    <t-divider id="time">track_total_hits设置</t-divider>
    <t-alert theme="info" title="track_total_hits介绍">
      <p>
        track_total_hits 是
        Elasticsearch（ES）中用于控制搜索请求是否<b>精确计算并返回匹配文档总数</b>的参数。它在 ES
        7.0 版本中引入，主要背景是 Lucene 8 的优化更新（如 WAND 算法），旨在提升查询性能。
      </p>
      <ul>
        <li>true: 精确计算所有匹配文档的总数，性能开销大</li>
        <li>false: 不计算总数，性能最佳</li>
        <li>自定义: 整数（如 100000） 精确计算到该数量为止，超过则返回近似值</li>
      </ul>
    </t-alert>
    <t-form-item
      label-align="top"
      label="track_total_hits模式"
      name="trackTotalHitsMode"
      help="默认为true，当版本低于v7则不会生效"
    >
      <t-radio-group v-model="globalSetting.trackTotalHitsMode" default-value="true">
        <t-radio :value="'true'">true</t-radio>
        <t-radio :value="'false'">false</t-radio>
        <t-radio :value="'custom'">自定义</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item
      v-if="globalSetting.trackTotalHitsMode === 'custom'"
      label-align="top"
      label="track_total_hits值"
      name="trackTotalHitsValue"
    >
      <t-input-number
        v-model="globalSetting.trackTotalHitsValue"
        controls-position="right"
        :min="0"
        :step="1000"
        class="w-240px"
      />
    </t-form-item>

    <t-divider id="time">请求设置</t-divider>
    <t-form-item id="timeout" label-align="top" label="超时时间">
      <t-input-number
        v-model="globalSetting.timeout"
        controls-position="right"
        :min="0"
        :step="1000"
        placeholder="超时时间"
        class="w-240px"
      >
        <template #suffix>ms</template>
      </t-input-number>
    </t-form-item>
    <t-form-item id="notificationTime" label-align="top" label="通知关闭时间">
      <t-input-number
        v-model="globalSetting.notificationTime"
        controls-position="right"
        :min="0"
        :step="1000"
        placeholder="单位（ms）"
        class="w-240px"
      >
        <template #suffix>ms</template>
      </t-input-number>
    </t-form-item>

    <t-divider id="display">显示设置</t-divider>
    <t-form-item id="pageSize" label-align="top" label="默认分页大小">
      <t-input-number v-model="globalSetting.pageSize" controls-position="right"></t-input-number>
    </t-form-item>
    <t-form-item id="jsonFontSize" label-align="top" label="字体大小">
      <t-input-number v-model="globalSetting.fontSize" controls-position="right">
        <template #suffix>px</template>
      </t-input-number>
    </t-form-item>
    <t-form-item label-align="top" label="换行">
      <t-switch
        v-model="globalSetting.wrap"
        :checked-value="true"
        :unchecked-value="false"
        type="round"
      >
        <template #label="slotProps">{{ slotProps.value ? "换行" : "不换行" }}</template>
      </t-switch>
    </t-form-item>
    <t-form-item label-align="top">
      <template #label>
        <span>表格视图页头模式</span>
        <t-tooltip content="基础查询和高级查询" placement="top" effect="light">
          <questionnaire-icon class="ml-5px" />
        </t-tooltip>
      </template>
      <t-radio-group v-model="globalSetting.tableHeaderMode">
        <t-radio label="索引映射" :value="TableHeaderModeEnum.MAPPING" />
        <t-radio label="实时渲染" :value="TableHeaderModeEnum.RENDER" />
      </t-radio-group>
    </t-form-item>

    <t-divider id="other">其他设置</t-divider>
    <t-form-item id="lastUrl" label-align="top">
      <template #label>
        <span>保存上次选择的连接</span>
        <t-tooltip
          content="保存后，下一次打开es-client自动选中该链接"
          placement="top"
          effect="light"
        >
          <icon-question-circle style="margin-left: 5px" />
        </t-tooltip>
      </template>
      <t-switch
        v-model="globalSetting.lastUrl"
        :checked-value="true"
        :unchecked-value="false"
        type="round"
      >
        <template #label="slotProps">{{ slotProps.value ? "保存" : "忽略" }}</template>
      </t-switch>
    </t-form-item>
  </t-form>
</template>
<script setup lang="ts">
import TableHeaderModeEnum from "@/enumeration/TableHeaderModeEnum";
import { QuestionnaireIcon } from "tdesign-icons-vue-next";
import { useGlobalSettingStore } from "@/store";

const { globalSetting } = toRefs(useGlobalSettingStore());
</script>
<style lang="less">
.home-exclude-index {
  margin-left: 5px;

  &:first-child {
    margin-left: 0;
  }
}

.home-exclude-item {
  margin-left: 5px;
}

.like-red {
  color: var(--td-error-color);
}

.setting-global {
  margin-top: 7px;

  .arco-form-item-wrapper-col {
    width: 350px;
  }

  .w-full {
    .arco-form-item-wrapper-col {
      width: 100%;
    }
  }
}
</style>
